<!DOCTYPE html>

<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<title>岗位详情页</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/static/css/app.css" />
	<script type="text/javascript" src="/static/js/countUp.min.js"></script>
</head>

<body class="bg01">
	<!-- 悬浮的 -->

	<header class="header">
		<h3 style="font-size:28px;">{{work_name}}</h3>
		<a style="position:absolute;top:2%;left:3%;color:white" href="{{ url_for('ind.main')}}">返回</a>

	</header>



	<div class="wrapper">

		<div class="preview" id="preview_card" style="display: none;">
			<div class="xpanel-wrapper fill-h">
				<div class="xpanel" style="height: 100%;">
					<div class="fill-h" id="preview" ></div>
				</div>
			</div>
		</div>

		<!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
		<div class="container-fluid">
			<div class="row fill-h">

				<!-- 左边两列 -->
				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-4">
						<div class="xpanel">
							<div class="fill-h" id="educated_salary"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-3">
						<div class="xpanel">
							<div class="fill-h" id="company_type"></div>

						</div>
					</div>
				</div>

				<!-- 中间 -->
				<div class="col-lg-6 fill-h">

					<!--<div class="row" style="height: 13%;">-->
						<!--<div class="xpanel-wrapper" style="height: 100%;">-->
							<!--<div class="xpanel">-->
								<!--<div class="xpanel2" id="title">-->
									<!--<span id="jobsum">岗位数量：加载中</span>-->
								<!--</div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
					<div class="xpanel-wrapper xpanel-wrapper-1 " style="height: 13%;" >

							<div class="xpanel" id="title">
									<span class="xpanel2 jobsum"><span  id="jobsum_text">岗位数量：</span><span id="jobsum">加载中</span></span>

							</div>

					</div>
					<div class="row" style="height: 54%;">
						<div class="xpanel-wrapper" style="height: 100%;">
							<div class="xpanel">
								<div class="fill-h" id="worderCity_needed" style="display:block"></div>

								<!-- <div class="xpanel1" id="title1" style="position:absolute;top:59%;left:4%">
								<p style="position:absolute;left:40%"> 岗位需求城市</p>
							</div> -->
								<!-- <script>
								function giao() {
									document.getElementById("mouse_in").style.display = 'none';
									document.getElementById("worderCity_needed").style.display = 'block';
									document.getElementById("return_preP").style.display = 'none';
									document.getElementById("title").style.display = 'block';
									document.getElementById("title1").style.display = 'block';
									console.log('点击了返回原图或者是鼠标离开了div');
									return false;
								}
							</script> -->
								<!-- <a href="javascript:giao();" id="return_preP" -->
								<!-- style="display:none;position:absolute;top:3%;left:85%;color:white">返回原图</a> -->
							</div>
						</div>
					</div>
					<div class="row" style="height: 33%;">
						<!-- 设置屏幕小时显示12，就是全屏宽 -->
						<div class="col-lg-6 fill-h col-xs-12">
							<div class="xpanel-wrapper fill-h">
								<div class="xpanel">
									<!-- <div class="xpanel1">
										<p> 公司规模</p>
									</div> -->
									<!-- 企业规模 -->
									<div class="fill-h" id="company_workerNum"></div>

								</div>
							</div>
						</div>
						<!-- 设置屏幕小时显示12，就是全屏宽 -->
						<div class="col-lg-6 fill-h col-xs-12">
							<div class="xpanel-wrapper fill-h">
								<div class="xpanel ">
									<!-- <div class="xpanel1">
										<p> 学历要求</p>
									</div> -->
									<!--  学历要求 -->
									<div class="fill-h" id="edu_requried"></div>

								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 右边 -->
				<!-- 设置屏幕小时显示12，就是全屏宽 -->
				<div class="col-lg-3 fill-h col-xs-12">
					<div class="xpanel-wrapper xpanel-wrapper-3">
						<div class="xpanel">
							<!-- <div class="xpanel1">
								<p> 薪资水平</p>
							</div> -->
							<!-- 薪资水平 -->
							<div class="fill-h" id="avg_salary"></div>

						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-3">
						<div class="xpanel">
							<!-- <div class="xpanel1">
								<p> 技能要求</p>
							</div> -->
							<!-- 技能词云 -->
							<div class="fill-h" id="skill_wordcloud"></div>

						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-3">
						<div class="xpanel">
							<!-- <div class="xpanel1">
								<p> 经验要求</p>
							</div> -->
							<!-- 经验要求 -->
							<div class="fill-h" id="exp_requried"></div>

						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
	<!--<script type="text/javascript" src="/static/js/echarts.min.js"></script>-->
	{# config是flask内置的对象，from_object那时设置的 #}

	{% if config['ENV']=='production' %}
	<!-- 部署时使用cdn加速的 -->
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
	{% else %}
	<!-- 开发时本地的echarts.js方便点 -->
	<script type="text/javascript" src="/static/js/echarts.min.js"></script>
	{% endif %}
	<script type="text/javascript" src="/static/js/echarts-wordcloud.min.js"></script>
	<script type="text/javascript" src="/static/js/jobs.js"></script>

		<!--数据加载中-->


	<script type="text/javascript">
		//		用于ajax请求的字段
		var cate2 = {}
		cate2['cate2'] = '{{work_name}}'

		//图表联动选中状态
		var dataChanged=false
<!--		console.log(typeof(dataChanged))-->
		
		$(function () {

			//绑定鼠标的移入移除事件，mouseenter mouseleave是进入子元素不触发，除了他们还有mouseover，mouseout()是进入子元素也触发
			// $('.xpanel').on('mouseenter mouseleave', function (event) {
			// 	$self = $(this);
			// 	if (event.type == 'mouseenter') {
			// 		console.log("鼠标进去了")
			// 		//	捕捉当前鼠标悬浮的图表容器名称
			// 		var id = event.currentTarget.children[1].attributes.id.nodeValue
			// 		//						if (id=="mouse_in"){}
			// 		//						else{
			// 		document.getElementById("worderCity_needed").style.display = 'none';
			// 		document.getElementById("mouse_in").style.display = 'block';
			// 		document.getElementById("return_preP").style.display = 'block';
			// 		document.getElementById("title").style.display = 'none';
			// 		document.getElementById("title1").style.display = 'none';
			// 		//						}
			// 		$.post("/job2/" + id, data = cate2, result => {
			// 			console.log(result)
			// 			if (id == "avg_salary") {
			// 				avg_salary(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "edu_requried") {
			// 				edu_requried(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "exp_requried") {
			// 				exp_requried(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "company_workerNum") {
			// 				company_workerNum(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "company_type") {
			// 				company_type(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "educated_salary") {
			// 				educated_salary(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "worderCity_needed") {
			// 				worderCity_needed(result['A'], result['B'], "mouse_in")
			// 			} else if (id == "skill_wordcloud") {
			// 				skill_wordcloud(result['A'], result['B'], "mouse_in")
			// 			} else { }
			// 		})

			// 	} else if (event.type == 'mouseleave') {
			// 		//					执行上面定义的一个函数，作用是恢复原图表
			// 		giao()
			// 	}
			// });

<!--			//中间大图原本的Option-->
<!--			var worderCity_needed_option = null;-->
<!--			//中间图的-->
<!--			var worderCity_needed_chart = getChart("worderCity_needed");-->
<!--            worderCity_needed_chart.setOption(worderCity_needed_option)-->

			//预览的
			$("#preview_card").mouseleave(function () {
<!--				console.log("ffff移出")-->
				$("#preview_card").hide(500)
			})
			$("#preview_card").mouseover(function () {
<!--				console.log("ffff移入")-->
				// $("#preview_card").hide()
			})

<!--		设置全局同步 	$.ajaxSettings.async=false;-->

			//ajax请求们
			var jobsum_data=null;
			$.post("/job2/jobsum", data = cate2, result => {
<!--				console.log(result)-->
				<!--$("#jobsum").text("岗位数量："+result['jobsum'])-->
				set_jobsum("岗位数量：",result['jobsum'])
				jobsum_data=result
			})
			var worderCity_needed_data=null;
			$.post("/job2/worderCity_needed", data = cate2, result => {
<!--				console.log(result)-->
				worderCity_needed(result['A'], result['B'], "worderCity_needed")
				worderCity_needed_data=result
			})
            var educated_salary_data=null;
			$.post("/job2/educated_salary", data = cate2,function(result){
<!--				console.log(result)-->
				educated_salary(result['A'], result['B'], "educated_salary")
				educated_salary_data=result;
			})

<!--            setTimeout(function () {-->
<!--                   console.log(a);-->
<!--                }, 4000);-->
            var company_type_data=null;
			$.post("/job2/company_type",data = cate2, result => {
				company_type(result['A'], result['B'], "company_type")
				company_type_data=result
			})
			var company_workerNum_data=null;
			$.post("/job2/company_workerNum", data = cate2, result => {
<!--				console.log(result)-->
				company_workerNum(result['A'], result['B'], "company_workerNum")
				company_workerNum_data=result
			})
			var edu_requried_data=null;
			$.post("/job2/edu_requried", data = cate2, result => {
<!--				console.log(result)-->
				edu_requried(result['A'], result['B'], "edu_requried")
				edu_requried_data=result
			})
			var exp_requried_data=null;
			$.post("/job2/exp_requried", data = cate2, result => {
<!--				console.log(result)-->
				exp_requried(result['A'], result['B'], "exp_requried")
				exp_requried_data=result
			})
			$.post("/job2/skill_wordcloud", data = cate2, result => {
<!--				console.log(result)-->
				load_skill_wordcloud=result
				skill_wordcloud(result['A'], result['B'], "skill_wordcloud")
			})
			var avg_salary_data=null;
			$.post("/job2/avg_salary", data = cate2, result => {
<!--				console.log(result)-->
				avg_salary(result['A'], result['B'], "avg_salary")
				avg_salary_data=result
			})


			//获取通用的Toolbox,custom为一些自定义的部分
			function getToolbox(chart, custom) {
				let toolbox = {
					show: true,
					top:'-1%',
					feature: {
						//保存图片的
						saveAsImage: {},
						// dataView:{},
						//第二种放大
						myMax2: {
							show: true,
							title: "悬浮放大图片",
							icon: "path://M977.454545 81.454545v236.125091a34.909091 34.909091 0 0 1-69.818181 0V165.701818l-269.870546 269.870546a34.816 34.816 0 0 1-49.338182 0 34.909091 34.909091 0 0 1 0-49.384728L858.251636 116.363636h-151.831272a34.909091 34.909091 0 1 1 0.046545-69.818181h236.078546a34.909091 34.909091 0 0 1 34.90909 34.90909zM386.280727 588.381091L116.363636 858.251636v-151.924363a34.909091 34.909091 0 1 0-69.818181 0.046545v236.171637a34.909091 34.909091 0 0 0 34.90909 34.90909h236.171637a34.909091 34.909091 0 0 0 0-69.818181H165.748364l269.917091-269.917091a34.909091 34.909091 0 1 0-49.384728-49.338182zM165.748364 116.363636h151.924363A34.909091 34.909091 0 1 0 317.626182 46.545455H81.454545a34.909091 34.909091 0 0 0-34.90909 34.90909v236.125091a34.909091 34.909091 0 0 0 69.818181 0V165.701818l269.917091 269.870546a34.816 34.816 0 0 0 49.338182 0 34.909091 34.909091 0 0 0 0-49.384728L165.748364 116.363636zM942.545455 671.464727a34.909091 34.909091 0 0 0-34.909091 34.909091v151.924364l-269.870546-269.917091a34.909091 34.909091 0 1 0-49.384727 49.384727l269.870545 269.917091h-151.831272A34.909091 34.909091 0 1 0 706.466909 977.454545h236.078546a34.909091 34.909091 0 0 0 34.90909-34.90909v-236.171637a34.909091 34.909091 0 0 0-34.90909-34.909091z",
							onclick: function () {
								var clickOption = chart.getOption()
<!--								console.log(clickOption)-->
<!--								console.log(clickOption.title[0].text)-->
								// chart.setOption(rawOption)
								//500延迟动画
								$("#preview_card").show(500, function () {

									var preview_chart = getChart("preview")
									preview_chart.clear()
									if(clickOption.title[0].text=="技能要求"){
										clickOption.series[0]['sizeRange']=[22,66]
									}

									console.log(clickOption)
									console.log(clickOption.tooltip[0].formatter)
									if(clickOption.title[0].text=="岗位需求城市"){
										clickOption.tooltip[0].formatter=function (params) {
											var valdata=params[0].axisValue;
											return params['0'].name + "<br>" + "招聘人数:" + params['0'].value
										}
									}
									if(clickOption.title[0].text=="学历要求" || clickOption.title[0].text=="经验要求" || clickOption.title[0].text=="企业性质"){
										clickOption.tooltip[0].formatter= function (params) {
											return params.name + "<br>" + "招聘人数:" + params.value
										}
									}
									preview_chart.setOption(clickOption)

								})
							}
						},
						myReturn: {
							show: true,
							title: "取消选中",
							icon: "path://M876.28 373.41c-59.06-59.06-137.58-91.58-221.1-91.58h-443.3l112.88-112.88c15.62-15.62 15.62-40.95 0-56.57-15.62-15.62-40.95-15.62-56.57 0L85.31 295.26c-15.62 15.62-15.62 40.95 0 56.57L268.18 534.7c7.81 7.81 18.05 11.72 28.28 11.72s20.47-3.91 28.28-11.72c15.62-15.62 15.62-40.95 0-56.57l-116.29-116.3h446.73c62.15 0 120.59 24.2 164.54 68.15 43.95 43.95 68.15 102.38 68.15 164.53v16.14c0 62.15-24.2 120.59-68.15 164.53s-102.38 68.15-164.54 68.15H223.34c-22.09 0-40 17.91-40 40s17.91 40 40 40h431.83c83.52 0 162.04-32.53 221.1-91.58s91.58-137.58 91.58-221.1v-16.14c0.01-83.52-32.51-162.04-91.57-221.1z",
							onclick: function () {
								console.log("点击取消选中")
                                educated_salary(educated_salary_data['A'], educated_salary_data['B'], "educated_salary")
                                company_type(company_type_data['A'], company_type_data['B'], "company_type")
                                company_workerNum(company_workerNum_data['A'], company_workerNum_data['B'], "company_workerNum")
                                edu_requried(edu_requried_data['A'], edu_requried_data['B'], "edu_requried")
                                exp_requried(exp_requried_data['A'], exp_requried_data['B'], "exp_requried")
                                avg_salary(avg_salary_data['A'], avg_salary_data['B'], "avg_salary")
                                worderCity_needed(worderCity_needed_data['A'], worderCity_needed_data['B'], "worderCity_needed")
                                <!--$("#jobsum").text("岗位数量："+jobsum_data['jobsum'])-->
                                set_jobsum("岗位数量：",jobsum_data['jobsum'])
                                dataChanged=false
							}
						}
<!--						// 第一种放大组件-->
<!--						myMax: {-->
<!--							show: true,-->
<!--							title: "放大图片",-->
<!--							icon: "path://M977.454545 81.454545v236.125091a34.909091 34.909091 0 0 1-69.818181 0V165.701818l-269.870546 269.870546a34.816 34.816 0 0 1-49.338182 0 34.909091 34.909091 0 0 1 0-49.384728L858.251636 116.363636h-151.831272a34.909091 34.909091 0 1 1 0.046545-69.818181h236.078546a34.909091 34.909091 0 0 1 34.90909 34.90909zM386.280727 588.381091L116.363636 858.251636v-151.924363a34.909091 34.909091 0 1 0-69.818181 0.046545v236.171637a34.909091 34.909091 0 0 0 34.90909 34.90909h236.171637a34.909091 34.909091 0 0 0 0-69.818181H165.748364l269.917091-269.917091a34.909091 34.909091 0 1 0-49.384728-49.338182zM165.748364 116.363636h151.924363A34.909091 34.909091 0 1 0 317.626182 46.545455H81.454545a34.909091 34.909091 0 0 0-34.90909 34.90909v236.125091a34.909091 34.909091 0 0 0 69.818181 0V165.701818l269.917091 269.870546a34.816 34.816 0 0 0 49.338182 0 34.909091 34.909091 0 0 0 0-49.384728L165.748364 116.363636zM942.545455 671.464727a34.909091 34.909091 0 0 0-34.909091 34.909091v151.924364l-269.870546-269.917091a34.909091 34.909091 0 1 0-49.384727 49.384727l269.870545 269.917091h-151.831272A34.909091 34.909091 0 1 0 706.466909 977.454545h236.078546a34.909091 34.909091 0 0 0 34.90909-34.90909v-236.171637a34.909091 34.909091 0 0 0-34.90909-34.909091z",-->
<!--							onclick: function () {-->
<!--								console.log("点击放大图片")-->
<!--								// var rawOption = worderCity_needed_chart.getOption()-->
<!--								var clickOption = chart.getOption()-->
<!--								console.log(clickOption)-->
<!--								//设置为缩小-->
<!--								clickOption['toolbox'][0]['feature']['myMin']['show'] = true-->
<!--								clickOption['toolbox'][0]['feature']['myMax']['show'] = false-->
<!--								worderCity_needed_chart.clear()-->

<!--								// 点击切换Option-->
<!--								worderCity_needed_chart.setOption(clickOption)-->


<!--							}-->
<!--						},-->
<!--						// 缩小还原-->
<!--						myMin: {-->
<!--							show: false,//在是大图时才显示-->
<!--							title: "还原",-->
<!--							icon: "path://M410.112 513.664 97.664 513.664c-17.664 0-32 14.336-32 32s14.336 32 32 32l242.752 0-267.456 267.456c-12.032 12.032-12.032 31.36 0 43.392 11.968 11.968 31.36 11.968 43.328 0l269.376-269.376 0 246.592c0 17.664 14.336 32 32 32s32-14.336 32-32l0-320C449.664 521.6 435.84 513.664 410.112 513.664zM553.216 449.664l312.512 0c17.664 0 32-14.336 32-32s-14.336-32-32-32L622.912 385.664l267.456-267.456c12.032-12.032 12.032-31.36 0-43.392-11.968-11.968-31.36-11.968-43.328 0L577.664 344.256 577.664 97.664c0-17.664-14.336-32-32-32s-32 14.336-32 32l0 320C513.664 438.144 529.664 449.664 553.216 449.664z",-->
<!--							onclick: function () {-->
<!--								console.log("点击还原图片")-->
<!--								worderCity_needed_chart.setOption(worderCity_needed_option)-->
<!--							}-->
<!--						}-->
					},
					iconStyle: {
						// color:"DeepSkyBlue",
						borderColor: "rgba(0,191,255,0.51)",

					},
					emphasis: {
						iconStyle: {
							// color:"DeepSkyBlue",
							borderColor: "DeepSkyBlue"

						},
					}
				}
				toolbox = Object.assign(toolbox, custom)
				return toolbox;
			}


			function change_Ajax(cate2,chartID){
<!--				console.log(cate2,chartID)-->
				$.post("/job2/jobsum", data = cate2, result => {
					<!--$("#jobsum").text("岗位数量："+result['jobsum'])-->
<!--					console.log(cate2['data2'])-->
					set_jobsum("“"+cate2['data2']+"”"+"岗位数量：",result['jobsum'])
				})
				if(chartID!=educated_salary && chartID!=exp_requried){
					getChart("educated_salary").clear()
					load(getChart("educated_salary"))
					$.post("/job2/educated_salary", data = cate2, result => {
						educated_salary(result['A'], result['B'], "educated_salary")
					})

				}
				if(chartID!=educated_salary && chartID==exp_requried){
					getChart("educated_salary").clear()
					load(getChart("educated_salary"))
					setTimeout(educated_salary,1000,educated_salary_data['A'], educated_salary_data['B'], "educated_salary")
				}
				if(chartID!=company_type){
					getChart("company_type").clear()
					load(getChart("company_type"))
					$.post("/job2/company_type", data = cate2, result => {
						company_type(result['A'], result['B'], "company_type")
					})
				}
				if(chartID!=company_workerNum){
					getChart("company_workerNum").clear()
					load(getChart("company_workerNum"))
					$.post("/job2/company_workerNum", data = cate2, result => {
						company_workerNum(result['A'], result['B'], "company_workerNum")
					})
				}
				if(chartID!=edu_requried){
					getChart("edu_requried").clear()
					load(getChart("edu_requried"))
					$.post("/job2/edu_requried", data = cate2, result => {
						edu_requried(result['A'], result['B'], "edu_requried")
					})
				}
				if(chartID!=exp_requried){
					getChart("exp_requried").clear()
					load(getChart("exp_requried"))
					$.post("/job2/exp_requried", data = cate2, result => {
						exp_requried(result['A'], result['B'], "exp_requried")
					})
				}
				if(chartID!=avg_salary){
					getChart("avg_salary").clear()
					load(getChart("avg_salary"))
					$.post("/job2/avg_salary", data = cate2, result => {
						avg_salary(result['A'], result['B'], "avg_salary")
					})
				}
				if(chartID!=worderCity_needed){
					getChart("worderCity_needed").clear()
					load(getChart("worderCity_needed"))
					$.post("/job2/worderCity_needed", data = cate2, result => {
						worderCity_needed(result['A'], result['B'], "worderCity_needed")
					})
				}
				if(chartID!=skill_wordcloud){
					getChart("skill_wordcloud").clear()
					load(getChart("skill_wordcloud"));
					setTimeout(skill_wordcloud, 1000,load_skill_wordcloud['A'], load_skill_wordcloud['B'], "skill_wordcloud");
					<!--skill_wordcloud(load_skill_wordcloud['A'], load_skill_wordcloud['B'], "skill_wordcloud")-->
				}
			}

			//设置数量文字
		function set_jobsum(text,num){

<!--			console.log("set text:"+text)-->
<!--			console.log("set num:"+num)-->
			//nan的
			if(isNaN(num))
			{
			    const countUp = new CountUp('jobsum', 0);
				$('#jobsum_text').text(text)
				<!--return "0";-->
			}else{
			    const countUp = new CountUp('jobsum', num,{

		});
			// jobsum
			$('#jobsum_text').text(text)

			//这里还有bug
			// countUp.update(num);
			if (!countUp.error) {
			countUp.start();
			} else {
			console.error(countUp.error);
			}
			}

		}

			//获取图表,获取时设置一些事件
			function getChart(id) {
				let chart = jobs.initChartId(id)
				// echarts.init(document.getElementById(id));
				//鼠标移入移出时显示toolbox,这里是设置图表对应div的事件
				chart.getDom().addEventListener("mouseenter", function (params) {
					// console.log("鼠标移入")
					chart.setOption({
						toolbox: {
							show: true
						}
					})
				})
				//移出时隐藏
				chart.getDom().addEventListener("mouseleave", function (params) {
					chart.setOption({
						toolbox: {
							show: true
						}
					})
				})
				return chart;
			}

			//	毕业月薪走势	
			<!--educated_salary(["无需经验"], [10], "educated_salary")-->
			load(getChart("educated_salary"));
			function educated_salary(exp, salary, id) {
				var chart = getChart(id)
				var tooltip = jobs.getTooltip({
					formatter: function (params) {
						return params['0'].name + "<br>" + "平均月薪:" + params['0'].value + "k"
					},
					trigger: 'axis',
					 axisPointer: {
						type: 'shadow'
					},
				})
				var option = {
					toolbox: getToolbox(chart),
					title: {
						text: '毕业月薪走势',
						// textStyle: {
						// 	rich: {
						// 		a: {
						// 			width: "100%",
						// 			backgroundColor: "red"
						// 		}
						// 	}
						// }


					},
					grid: {
						bottom: 0,
						//包含坐标轴标签文字那些，bottom为0时会算在里面，不然会溢出
						containLabel: true,

					},
					tooltip:tooltip,
					xAxis: {
						name: '(年限)',
						nameTextStyle: { color: "DeepSkyBlue" },
						axisLine: { show:true,lineStyle: { color: '#275F82' } },
						type: 'category',
						data: exp,
						axisLabel: {//坐标轴刻度标签的相关设置。
							interval: 0,
							rotate: "25",
							textStyle: {
								color: "DeepSkyBlue",
							},
						}
					},
					yAxis: {
						axisLine: { lineStyle: { color: '#275F82' } },
						splitLine: { lineStyle: { color: '#275F82' } },
						type: 'value',
						axisLabel: {
							formatter: '{value}k',
							show: true,
							textStyle: {
								color: "DeepSkyBlue",
							},
						},
					},
					series: [{
						itemStyle: {
							normal: {
								color: 'DeepSkyBlue',
								//										borderWidth: 3,
								//										lineStyle:{
								//											color:'#247BA0'
								//										}
							},
							emphasis: {
								color: 'white',
								borderColor: 'DeepSkyBlue'
							}//***这个字段就是控制鼠标悬浮在圆点上面让整个圆填充满背景色，也可以更改边框颜色等！***
						},
						name: '平均月薪',
						lineStyle: {
							color: 'DeepSkyBlue',
							width: 2
						},
						data: salary,
						type: 'line',
						areaStyle: {
							normal: {
								color: '#275F82' //改变区域颜色
							}
						},
						smooth: true
					}]
				};
				loadoff(chart)
				chart.setOption(option);
			}


			//	薪资水平
			<!--avg_salary(["2k以下"], [10], "avg_salary")-->
			load(getChart("avg_salary"));
			function avg_salary(salary, each_salaryCount, id) {
				var chart = getChart(id)
				//

				var options = {
					title: {
						text: "薪资水平"
					},
					toolbox: getToolbox(chart),
					tooltip: { trigger: 'axis' },
					grid: { left: '17%', right: '20%', top: '20%', bottom: "13%" },
					xAxis: {
						name: '千(人数)',
						nameTextStyle: { color: "DeepSkyBlue" },
						splitLine: { show: false },
						type: "value",
						axisLine: { lineStyle: { color: '#275F82' } },
						axisLabel: {
							show: true,
							textStyle: {
								color: "DeepSkyBlue",
							},
						},
					},
					yAxis: {
						type: "category",
						data: salary,
						axisLine: { lineStyle: { color: '#275F82' } },
						axisLabel: {
							interval: 0,
							show: true,
							textStyle: {
								color: "DeepSkyBlue",
							},
						},
					},
					series: {
						type: "bar",
						name: "人数",
						data: each_salaryCount,
						color: "DeepSkyBlue",
						barWidth: 8,
					}
				};
									<!--chart.showLoading({-->
										<!--text: "图表数据正在努力加载...",-->
										<!--x: "center",-->
										<!--y: "center",-->
										<!--textStyle: {-->
										   <!--color:"white",-->
											<!--fontSize:14-->
										<!--},-->
										<!--effect:"spin"-->
									<!--});-->
				loadoff(chart);
				chart.setOption(options);

			}


			//	学历要求占比	
			<!--edu_requried(["本科"], [10], "edu_requried")-->
			load(getChart("edu_requried"));
			function edu_requried(edu, each_eduCount, id) {
				var chart = getChart(id)
				var tooltip = jobs.getTooltip({
					formatter: function (params) {
						return params.name + "<br>" + "招聘人数:" + params.value + "<br>" + "(点击获取" + params.name + "学历要求数据)"
					}
				})
				var option = {
					title: {
						text: "学历要求"
					},
					toolbox: getToolbox(chart),
					tooltip:tooltip,
					legend: {
						type: 'scroll',
						top: 20,
						align: 'right',
						orient: 'vertical',
						right: '5%',
						data: edu,
						textStyle: { color: 'white', fontSize: 10 }
					},
					series: [
						{
							stillShowZeroSum: false,
							name: '(点击获取该学历要求数据)',
							type: 'pie',
							radius: ['20%', '70%'],
							center: ['35%', '60%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: each_eduCount,
							itemStyle: {
								normal: {
									color: function (params) {
										//自定义颜色
										var colorList = [
											'DeepSkyBlue', 'PowderBlue', 'RoyalBlue', 'DarkSlateBlue', 'LightSkyBlue', 'SteelBlue'
										];
										return colorList[params.dataIndex]
									}
								}
							}
						}
					]
				};
				loadoff(chart)
				chart.setOption(option);
				chart.off('click')
				chart.on('click', function (params) {
                    // 在用户点击后控制台打印数据的名称
<!--                    console.log(params["name"]);-->

                    if(dataChanged==false){
                        cate2["data2"]=params["name"]
                        change_Ajax(cate2,edu_requried)
						dataChanged=false
                    }else{alert("请先点击“取消选中”按钮!")}

                });
			}


			//	经验要求占比	

			<!--exp_requried(["无需经验"], [100], "exp_requried")-->
			load(getChart("exp_requried"));
			function exp_requried(exp, each_expCount, ElementId) {
				var chart = getChart(ElementId)
				var tooltip = jobs.getTooltip({
					formatter: function (params) {
						return params.name + "<br>" + "招聘人数:" + params.value + "<br>" + "(点击获取" + params.name + "经验要求数据)"
					}
				})
				var option = {
					title: {
						text: "经验要求"
					},
					tooltip:tooltip,
					toolbox: getToolbox(chart),
					angleAxis: {
						axisTick: { interval: 0 },
						show: false,
						max: function (value) {    //设置圈坐标轴的最大值为数据里面最大值的两倍，这样柱子就不会超过中间
							return value.max * 2;
						}
					},
					radiusAxis: {
						splitLine: { show: true, lineStyle: { color: '#275F82' } },  //背景圆圈线
						axisTick: { alignWithLabel: true },
						type: 'category',
						data: exp,
						z: 10,
						axisLabel: {
							interval: 0,
							show: true,
							textStyle: {
								color: "white",
							},
						},

					},
					polar: {
						center: ['50%', '55%'],
						radius: "90%"
					},
					series: [{
						type: 'bar',
						data: each_expCount,
						coordinateSystem: 'polar',
<!--						name: '()招聘人数',-->
						color: "DeepSkyBlue",
						barWidth: "50%",

					}],
					legend: {
						show: false,
						data: ['A']
					}
				};
				loadoff(chart)
				chart.setOption(option);
				chart.off('click')
				chart.on('click', function (params) {
                    // 在用户点击后控制台打印数据的名称
<!--                    console.log(params["name"]);-->
                    //判断数据是否已经被联动过，是的话要先返回才可以进行下一次点击
                    if(dataChanged==false){
                        cate2["data2"]=params["name"]
                        change_Ajax(cate2,exp_requried)
						dataChanged=false
                    }else{alert("请先点击“取消选中”按钮!")}

                });
			}


			//	公司规模	
			<!--company_workerNum("高中/中技/中专", { value: 8, name: '高中/中技/中专' }, "company_workerNum")-->
			load(getChart("company_workerNum"));
			function company_workerNum(cnum, each_cnumCount, id) {
				var chart = getChart(id)

				var option = {
					title: {
						text: "公司规模"
					},
					toolbox: getToolbox(chart),
					tooltip: {},
					legend: {
						show: false
					},
					radar: {
						// shape: 'circle',
						radius: '60%',
						center: ['50%', '55%'],
						name: {
							textStyle: {
								color: 'white',
								fontSize: 11
								//									borderRadius: 1,
								//									padding: [1, 2]
							}
						},
						axisLine: {
							lineStyle: {
								color: '#275F82',
							},
						},
						indicator: cnum,
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(0,88,155,0.3)',]
								// 图表背景网格的颜色
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: ['#275F82']
								// 图表背景网格线的颜色
							}
						}
					},
					series: [{
						name:"公司规模",
						type: 'radar',
						areaStyle: { normal: { color: "DeepSkyBlue" } },
						data: [
							{
								value: each_cnumCount,
								itemStyle: {
									normal: {
										color: 'DeepSkyBlue',
										lineStyle: {
											color: 'DeepSkyBlue',
										},
									},
								},
							}
						]
					}]
				};
				loadoff(chart)
				chart.setOption(option);
				chart.off('click')
				chart.on('click', function (params) {
                    // 在用户点击后控制台打印数据的名称
                    console.log("这个图没有点击功能");
                });
			}

			//	企业性质	
			<!--company_type("民营公司", [10], "company_type")-->
			load(getChart("company_type"));
			function company_type(ctype, each_ctypeCount, id) {
				var chart = getChart(id)
				var tooltip = jobs.getTooltip({
					formatter: function (params) {
					if(params.name == "其他"){return params.name + "<br>" + "招聘人数:" + params.value + "<br>" + "(当前企业性质暂不允许点击)"}
					else{return params.name + "<br>" + "招聘人数:" + params.value + "<br>" + "(点击获取" + params.name + "企业性质数据)"}
					}
				})
				var option = {
					title: {
						text: "企业性质"
					},
					toolbox: getToolbox(chart),
					tooltip:tooltip,
					legend: {
						type: 'scroll',
						top: 20,
						align: 'left',
						orient: 'vertical',
						left: '5%',
						data: ctype,
						textStyle: { color: 'white', fontSize: 10 }
					},
					series: [
						{
							stillShowZeroSum: false,
<!--							name: '(点击获取该企业性质数据)',-->
							type: 'pie',
							radius: ['30%', '70%'],
							center: ['65%', '60%'],

							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							itemStyle: {
								normal: {
									color: function (params) {
										//自定义颜色
										var colorList = [
											'DeepSkyBlue', 'PowderBlue', 'RoyalBlue', 'DarkSlateBlue', 'LightSkyBlue', 'SteelBlue'
										];
										return colorList[params.dataIndex]
									}
								}
							},
							data: each_ctypeCount
						}
					]
				};
				loadoff(chart)
				chart.setOption(option);
				chart.off('click')
				chart.on('click', function (params) {
                    // 在用户点击后控制台打印数据的名称
                    if(dataChanged==false){
                        if(params["name"] != "其他"){
                            console.log(params["name"])
                            load(getChart("worderCity_needed"));
                            getChart("worderCity_needed").clear()
                            cate2["data2"]=params["name"]
                            change_Ajax(cate2,company_type)
                            dataChanged=false
                            }
                    }else{alert("请先点击“取消选中”按钮!")}

                });
			}


			//	岗位需求前十	
			<!--worderCity_needed(["广州"], [10], "worderCity_needed")-->
			load(getChart("worderCity_needed"));
			function worderCity_needed(city, worder_num, id) {
				var chart = getChart(id)
<!--				let box = getToolbox(worderCity_needed_chart)-->
<!--				//默认的隐藏放大-->
<!--				box['feature']['myMax']['show'] = false-->
				var tooltip = jobs.getTooltip({
					formatter: function (params) {
						var valdata=params[0].axisValue;
						sessionStorage.clear();
					　　sessionStorage.setItem('pamVal',valdata);
						<!--console.log(sessionStorage.getItem('pamVal'))-->
						return params['0'].name + "<br>" + "招聘人数:" + params['0'].value + "<br>" + "(点击获取" + params['0'].name + "城市数据)"
					},
					trigger: 'axis',
					 axisPointer: {
						type: 'shadow'
					},
				})
				var option = {
					title:{
						text:'岗位需求城市'
					},
<!--					toolbox: box,-->
                    toolbox: getToolbox(chart),
					grid: {
						// top: '40%'
						bottom: 0,
						//包含坐标轴标签文字那些，bottom为0时会算在里面，不然会溢出
						containLabel: true,

					},
					tooltip: tooltip,
					xAxis: {
						name: '(城市)',
						axisLine: { lineStyle: { color: '#275F82' } },
						nameTextStyle: { color: "DeepSkyBlue" },
						type: 'category',
						data: city,
						axisLabel: {//坐标轴刻度标签的相关设置。
							interval: 0,
							textStyle: {
								color: "DeepSkyBlue",
							},
						},
					},
					yAxis: {
						axisLine: { lineStyle: { color: '#275F82' } },
						splitLine: { lineStyle: { color: '#275F82' } },
						name: '(人数)',
						nameTextStyle: { color: "DeepSkyBlue" },
						type: 'value',
						axisLabel: {
							formatter: '{value}',
							show: true,
							textStyle: {
								color: "DeepSkyBlue",
							},
						},
					},
					series: [{
						itemStyle: {
							normal: { color: 'DeepSkyBlue', },
							emphasis: {
								color: 'white',
								borderColor: 'DeepSkyBlue'
							}//***这个字段就是控制鼠标悬浮在圆点上面让整个圆填充满背景色，也可以更改边框颜色等！***
						},
						name: '招聘人数',
						lineStyle: {
							color: 'DeepSkyBlue',
							width: 2
						},
						data: worder_num,
						type: 'line',
						areaStyle: {
							normal: {
								color: '#275F82' //改变区域颜色
							}
						},
						smooth: true,
						label: {
							normal: {
								show: true,
								position: 'top',
								textStyle: { color: "white" }
							}
						},
					}]
				};
				loadoff(chart)
				chart.setOption(option);
				chart.off('click')
				<!--chart.on('click', function (params) {-->
                    <!--// 在用户点击后控制台打印数据的名称-->
				<!--　　　　console.log(sessionStorage.getItem('pamVal'))-->
                       <!--cate2["data2"]=sessionStorage.getItem('pamVal')-->
                       <!--change_Ajax(cate2,worderCity_needed)-->
                <!--});-->
			}
			getChart("worderCity_needed").getZr().on('click', function (params) {
                    // 在用户点击后控制台打印数据的名称
                    	const pointInPixel= [params.offsetX, params.offsetY];
                        if (getChart("worderCity_needed").containPixel('grid',pointInPixel)) {
                            if(dataChanged==false){
					　　　　console.log(sessionStorage.getItem('pamVal'))
						   cate2["data2"]=sessionStorage.getItem('pamVal')
						   change_Ajax(cate2,worderCity_needed)
<!--						   dataChanged=true-->
						   }else{alert("请先点击“取消选中”按钮!")}
					　　}

             });

			//	岗位技能词云 
			<!--skill_wordcloud({ name: 'hello', value: 200 }, "nothing", "skill_wordcloud")-->
			load(getChart("skill_wordcloud"));
			function skill_wordcloud(word_cloud_data, nothing, id) {
				var chart = getChart(id)

				var option = {
					title: {
						text: "技能要求"
					},
					toolbox: getToolbox(chart),
					tooltip: {},
					series: [{
						type: 'wordCloud',
						//								textPadding: 0,
						gridSize: 0,  //字符之间的间距(int)
						//								autoSize: {
						//									enable: true,
						//									 minSize: 10
						//								 },
						sizeRange: [11,30],  //字符的范围(array)
						rotationRange: [-20, 20],  //字符倾斜的角度(array)
						//								shape: 'pentagon',
						width: '70%',   //字符云画布宽度
						height: '90%',
						//								drawOutOfBound: true,
						textStyle: {
							normal: {
								fontFamily: '微软雅黑',
								color: function () {
									var colors = ['OrangeRed', 'HotPink', 'DeepPink', 'Cyan', 'MediumSpringGreen', 'Gold', 'Orange', 'YellowGreen', 'DarkGoldenrod'];
									return colors[parseInt(Math.random() * 10)];
								}
							},
							emphasis: {
								shadowBlur: 10,
								shadowColor: '#333'
							}
						},
						data: word_cloud_data
					}]
				};
				//词云背景图：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
				//					var maskImage = new Image();
				//					maskImage.src = '../static/img/wordClod_bkgroud.png';
				//					maskImage.onload = function(){
				loadoff(chart)
				chart.setOption(option);
				//					};
			}

		});

	</script>
</body>

</html>